<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" >
    <el-breadcrumb-item>组合优惠管理</el-breadcrumb-item>
    <el-breadcrumb-item>组合优惠列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card style="margin-top: 30px">
    <!--     搜索与添加区域 -->
    <el-row :gutter="20" >
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getDiscountsList">
          <el-button slot="append" icon="el-icon-search" @click="getDiscountsList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">添加优惠</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="discountslist"
      style="width: 100%;margin-top: 30px;margin-bottom: 20px"
      border
      stripe>
      <!-- 添加索引列 直接把type属性设置成index即可-->
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="disName" label="组合套餐名称">
      </el-table-column>
      <el-table-column prop="disGoods" label="组合商品列表"></el-table-column>
      <el-table-column prop="disDiscount" label="折扣"></el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="showdDeleteTip(scope.row.disId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--      分页区域-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  <el-dialog
    title="添加优惠"
    :visible.sync="addDialogVisible"
    width="40%"
    @close="addFormClosed">
    <!--      内容主体区域-->
    <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="140px">
      <el-form-item label="组合套餐名称" prop="disName">
        <el-input v-model="addForm.disName"></el-input>
      </el-form-item>
      <el-form-item label="选择组合商品列表" prop="disGoods">
        <el-cascader
          v-model="value"
          :options="depcategoodsList"
          :props="cascaderProps"
          @change="selectedHandleChange"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="折扣" prop="disDiscount">
        <el-input v-model="addForm.disDiscount"></el-input>
      </el-form-item>
    </el-form>
    <!--      底部区域-->
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDiscounts">确 定</el-button>
      </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'Discounts',
  data () {
    return {
      addDialogVisible: false,
      goodIdList: [],
      value: '',
      discountslist: [],
      addForm: {
        disName: '',
        disGoods: '',
        disDiscount: ''
      },
      depcategoodsList: [],
      cascaderProps: {
        // value指定你所选择的实际是哪个属性
        value: 'label',
        // label指定你所选择的显示出来的是哪个属性
        label: 'label',
        // children指定父子之间嵌套的是哪个属性
        children: 'children',
        expandTrigger: 'hover',
        multiple: true
      },
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0
    }
  },
  created () {
    this.getDiscountsList()
    this.getDepCateGoodsList()
  },
  methods: {
    getDiscountsList () {
      this.$axios.get('discounts', {params: this.queryInfo})
        .then(resp => {
          if (resp && resp.data.status !== 200) {
            return this.$message.error('获取商品组合优惠列表失败!')
          }
          this.discountslist = resp.data.data.data
          this.total = resp.data.data.totalpage
          console.log(resp.data.data)
          this.$message.success('获取商品组合优惠列表成功!')
        })
    },
    // 监听每页显示数量变化函数
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      // 每页显示数量变化后 重新请求用户列表
      this.getDiscountsList()
    },
    // 监听当前页码变化函数
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getDiscountsList()
    },
    getDepCateGoodsList () {
      this.$axios.get('category/allList', {params: {type: 3}})
        .then(resp => {
          if (resp.data.status !== 200) { this.$message.error('获取allList失败') }
          this.depcategoodsList = resp.data.data
          console.log(this.depcategoodsList)
          this.$message.success('获取allList成功')
        })
    },
    selectedHandleChange (jiedian) {
      console.log('jiedian')
      console.log(jiedian)
      console.log('value')
      console.log(this.value)
      for (let i = 0; i < this.value.length; i++) {
        this.goodIdList[i] = this.value[i][2]
      }
      console.log(this.goodIdList)
    },
    addDiscounts () {
      this.addForm.disGoods = this.goodIdList.join(',')
      this.$axios.post('discounts', this.addForm)
        .then(resp => {
          if (resp.data.status !== 200) { return this.$message.error('添加优惠失败') }
          this.$message.success('添加优惠成功')
          console.log(resp.data.data)
          this.getDiscountsList()
          this.addDialogVisible = false
        })
    },
    showdDeleteTip (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios
          .delete('discounts/' + id)
          .then(resp => {
            console.log(resp.data)
            if (resp.data.status !== 200) return this.$message.error('删除失败')
            this.getDiscountsList()
          })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
